* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
button {
  border: 0;
  outline: none;
}
.box {
  font: 12 px / 1.5 tahoma, arial, Hiragino Sans GB, \\5B8B\4F53, sans;
  width: 100%;
  border: 1px solid #e8e8e8;
  margin-top: 15px;
}
.box .title {
  width: 100%;
  height: 40px;
  user-select: none;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.box .title .date {
  font-size: 12px;
  margin: 0 15px;
}
.box .title .order-id {
  margin-left: 20px;
  font-size: 12px;
  color: #3c3c3cb6;
}
.box .item {
  display: flex;
  justify-content: center;
  padding: 10px 10px;
  color: #3c3c3c;
  font-size: 12px;
}
.box .item .r-detail {
  display: flex;
  flex: 3;
  height: 100px;
  margin-left: 20px;
}
.box .item .r-detail .img img {
  object-fit: cover;
  width: 80px;
  height: 80px;
  margin: 0 15px;
}
.box .item .r-detail .text {
  width: 250px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-right: 30px;
}
.box .item .r-price {
  flex: 1;
}
.box .item .r-quantity {
  flex: 1;
  margin-left: 30px;
}
.box .item .r-total {
  flex: 1;
}
.box .item .r-status {
  flex: 1;
}
.box .item .r-status .method {
  font-weight: 600;
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
  background-clip: text;
  color: transparent;
}
.box .item .r-option {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}
.box .item .r-option button {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  color: #fff;
  width: 80px;
  height: 25px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.box .item .r-option .disabled {
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.box .footer {
  background-color: #f5f5f5;
  width: 100%;
  height: 40px;
  color: #000;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
